<template>
  <div>
    <div v-show="!modal.show">
      <div  class="content-padding">
        <a-form layout="inline" class="nmv-search-form">
          <a-row type="flex">
            <a-col flex="auto">
              <a-form-item label="状态">
                <a-select v-model="queryParams.status" @change="searchQuerys" placeholder="请选择" class="nmv-w-200">
                  <a-select-option value="2">已读</a-select-option>
                  <a-select-option value="1">未读</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item>
                <a-button type="primary" @click="searchQuery">查询</a-button>
                <a-button style="margin-left:12px;" @click="queryReset">重置</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="nmv-mt-20 text-total" style="margin-bottom:16px;">消息通知： {{ grid.total }}项</div>
        <a-table :locale="locale" :rowClassName="rowClassName" rowKey="id" :pagination="false" :columns="grid.columns"
          :data-source="grid.data">
          <span slot="action" slot-scope="text, record">
            <permissions type="messageManage/notice/show">
              <a @click="onSee(record)" class="ant-dropdown-link">立即查看</a>
            </permissions>
          </span>
          <span slot="status" slot-scope="record">
            <div class="flex_start" v-show="record == 1">
              <div class="yuan blue"></div>
              <div>未读</div>
            </div>
            <div class="flex_start" v-show="record == 2">
              <div class="yuan gray"></div>
              <div>已读</div>
            </div>
          </span>
        </a-table>
        <div v-show="grid.total !== 0" style="text-align:right;">
          <a-pagination show-size-changer @change="onChange" :current="queryParams.pageNum"
            :pageSize="queryParams.pageSize" @showSizeChange="onShowSizeChange" style="margin-top:20px;" size="small"
            :total="grid.total" :show-total="total => `共${grid.total}条 `" />
        </div>
      </div>
    </div>
    <TodoMatterDetailDialog ref="TodoMatterDetailDialogRefs" />
    <TodoAcceptanceDialog ref="TodoAcceptanceDialogRefs" />
    <div v-show="modal.show">
      <message-management-modal ref="modal" />
    </div>
    <tag />
  </div>
</template>

<script>
import { userMessageList } from '@/services/message'
import Empty from '@/components/Empty/Empty'
import { cardTitleStyle, stateTextStyle } from '@/utils/style.js'
import messageManagementModal from './modal/messageManagementModal'
import permissions from '@/components/permissions'
import tag from '@/components/hq-tag'
import TodoMatterDetailDialog from './modal/TodoMatterDetailDialog'
import TodoAcceptanceDialog from './modal/TodoAcceptanceDialog'
export default {
  name: 'orderBatteryList',
  components: {
    TodoMatterDetailDialog,
    messageManagementModal,
    TodoAcceptanceDialog,
    permissions,
    tag
  },
  methods: {
    rowClassName (record, index) {
      if (record.status === 2) {
        return 'rowClass'
      }
      // }
      return ''
    },
    onSee (row) {
      console.log(row)
      if (row.sendType === 12) {
        this.$refs.TodoMatterDetailDialogRefs.onInitial(row.orderId)
      } else if (row.sendType === 15) {
        this.$router.push({
          path: '/repairManage/repairManage/repairRecord',
          query: {
            id: row.orderId
          }
        })
      } else if (row.sendType === 17) {
        this.$router.push({
          path: '/repairManage/repairManage/repairRecord',
          query: {
            id: row.orderId
          }
        })
      } else if (row.sendType === 18) {
        this.$router.push({
          path: '/vehicleManage/vehicleManage/schedule'
        })
      } else if (row.sendType === 55 || row.sendType === 55) {
        this.$router.push({ path: '/vehicleManage/vehicleManage/alarm' })
      } else if (row.sendType === 27) {
        this.$router.push({
          path: '/afterSaleManagement/afterSaleManagement/orderOverdue'
        })
      }
    },
    onChange (page, pageSize) {
      this.queryParams.pageNum = page
      console.log(pageSize)
      this.searchQuery()
    },
    async getList () {
      this.queryParams.type = 2
      const res = await userMessageList(this.queryParams)
      const { isSuccess, msg } = res

      if (isSuccess) {
        this.grid.data = res.data.records
        this.grid.total = res.data.total
      } else {
        this.$message.newFun(msg, 'error', 2)
      }
    },
    onShowSizeChange (current, pageSize) {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = pageSize
      console.log(current)
      this.searchQuery()
    },
    // 搜索
    searchQuery () {
      this.getList()
    },
    searchQuerys () {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.getList()
    },
    // 重置
    queryReset () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    }
  },
  data () {
    return {
      locale: {
        emptyText: <Empty />
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1
      },
      time: [], // 搜索时间临时存储
      stateStyle: Object.freeze(stateTextStyle),
      cardTitleStyle: Object.freeze(cardTitleStyle),
      modal: {
        show: false,
        data: {}
      },
      grid: {
        load: false,
        total: 0,
        data: [],
        columns: Object.freeze([
          {
            title: '通知公告',
            dataIndex: 'content',
            ellipsis: true,
            key: 'content'
          },
          {
            title: '接收时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 200
          },
          {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            scopedSlots: { customRender: 'status' },
            width: 200

          },

          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'action' },
            width: 200

          }
        ])
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>
<style  lang="less">
.ant-table-row.rowClass {
  td {
    color: #999999;
  }
}
</style>
